<template>
	<view class="chat-list">
		<view class="chat" v-for="(chat,index) in chatList" :key="index">
			<view class="row" @tap="toChat(chat)">
				<view class="left">
					<image :src="chat.img" v-if="chat.img"></image>
					<view class="iconfont" v-if="!chat.img" style="font-size: 35px;text-align: center;line-height: 40px;">&#xe6bc;</view>
				</view>
				<view class="right">
					<view class="top">
						<view class="username">{{chat.username || '未知客服'}}</view>
						<view class="time">{{chat.time}}</view>
					</view>
					<view class="bottom">
						<view class="msg">{{chat.msg}}</view>
						<view class="tis" v-if="chat.tis_num>0">{{chat.tis_num}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 空白页 -->
		<view class="empty-data" v-if="!chatList.length && hasLogin">
			<view class="iconfont">&#xe869;</view>暂无消息通知
		</view>
		<!-- 未登陆 -->
		<view v-if="!hasLogin" style="padding:70px;text-align: center;">
			您还未登陆，请先登陆
			<button type="warn" @tap="bindLogin(1)" @getuserinfo="bindLogin" open-type="getUserInfo"  withCredentials="true" >登录</button>
		</view>
	</view>
</template>

<script>
	import config from '../../config/config'
	import { mapState,mapActions } from 'vuex'
	
	export default {
		data() {
			return {
				chatList: []
			}
		},
		computed: mapState(['msgChatList','forcedLogin', 'hasLogin', 'userInfo']),
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			if(this.hasLogin) {
				this.getChatList();
			}else{
				uni.stopPullDownRefresh();
			}
		},
		onShow() {
			if(this.hasLogin){
				this.chatList = this.msgChatList;
			} 
		},
		watch: {
			msgChatList: function(newVal) {
				this.chatList = newVal;
			}
		},
		methods: {
			...mapActions(['autoModeLogin']),
			getChatList() {
				var that = this;
				that.$request("/common/app_csd/getChatList", {}, false).then(res => {
					let data = res.data;
					// data = [{
					// 	"content": "[偷笑]",
					// 	"time": "2020-06-28 11:57:24",
					// 	"username": "系统管理员",
					// 	"order_no": "2020062317254858",
					// 	"user_guid": "29223840-b4ef-11ea-876c-083e8ee4dc26",
					// 	"img": "http://127.0.0.1/bulid/adminLayui.t5//public/images/user_img.jpg",
					// 	"tis_num": 0
					// }, {
					// 	"content": "[吃惊]",
					// 	"time": "2020-06-28 11:57:13",
					// 	"username": null,
					// 	"order_no": "2020062317254858",
					// 	"user_guid": null,
					// 	"img": null,
					// 	"tis_num": 0
					// }]
					this.chatList = (data || []).map(function(h) {
						return {
							uid: h.user_guid || '',
							username: h.username || '',
							img: h.img,
							time: h.time,
							msg: h.content,
							tis_num: h.tis_num,
							order_no: h.order_no || ''
						}
					});
					uni.stopPullDownRefresh();
				});
			},
			toChat(chat) {
				uni.navigateTo({
					url: "chat?uid=" + chat.uid + "&name=" + chat.username + "&order_no=" + chat.order_no
				});
			},
			// 登录
			bindLogin(mode){
				this.autoModeLogin(mode).then(()=>{
					this.getChatList();
				}).catch(res=>{   
					
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgba(0, 0, 0, 0);
	}

	.chat-list {
		width: 94%;
		padding: 0 3%;

		.chat {
			width: 100%;
			height: 100upx;
			padding: 20upx 0;
			border-bottom: solid 1upx #eaeaea;

			.row {
				display: flex;
				justify-content: flex-start;

				.left {
					flex-shrink: 0;
					width: 100upx;
					height: 100upx;

					image {
						width: 100upx;
						height: 100upx;
						border-radius: 20upx;
					}
				}

				.right {
					flex-shrink: 1;
					width: 98%;
					padding-left: 2%;

					.top {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						.usernam {
							font-size: 26upx;
						}

						.time {
							font-size: 22upx;
							color: #bebebe;
						}
					}

					.bottom {
						width: 100%;
						height: 40upx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.msg {
							font-size: 25upx;
							color: #777;
						}

						.tis {
							width: 35upx;
							height: 35upx;
							font-size: 22upx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #eb4d3d;
							color: #fff;
							border-radius: 100%;
						}
					}
				}
			}
		}
	}
</style>
